<docs>
  ## 点击进入个人退休申请预约详情
  ## props
</docs>
<template>
  <div>
    <mheader @back_btn="goBack()" title="个人退休申请预约详情"></mheader>
    <div class="infor">
      <div class="infor-wrap" v-show="dataflag">
        <div class="infor-text-wrap">
          <p class="_left">
            审核状态：
            <span :class="[data.shzt == '未审核'? 'rightspan2' : (data.shzt == '审核通过' ? 'rightspan' : 'rightRed')]">{{data.shzt}}</span>
          </p>
          <p class="_left" v-if="data.sqzt">
            申请状态：
            <span :class="[data.sqzt == '正常'? 'rightspan' : 'rightRed']">{{data.sqzt}}</span>
          </p>
          <p class="_left" v-if="data.yyzt">
            预约状态：
            <span :class="[data.yyzt == '未预约' ? 'rightspan2' : 'rightspan']">{{data.yyzt}}</span>
          </p>
          <p class="_left cause" v-if="data.yyrq">
            预约日期：
            <span>{{data.yyrq}}</span>
          </p>
          <p class="_left cause" v-if="data.qxczsj">
            取消日期：
            <span>{{data.qxczsj}}</span>
          </p>
          <p class="_left cause" v-if="data.sqrq">
            申请日期：
            <span>{{data.sqrq}}</span>
          </p>
          <p class="cause" v-if="data.shzt == '审核未通过'">
            审核未通过原因：
            <span>{{data.shbtgyy}}</span>
          </p>
        </div>
        <div class="infor-text-wrap flex">
          <p class="flex_item">民族：<span>{{data.mz}}</span></p>
          <p class="flex_item">手机号码：<span>{{data.sjhm}}</span></p>
          <p class="flex_item">户口地址：<span>{{data.hkdz}}</span></p>
          <p class="flex_item">户口地址所属街道社保所：<span>{{data.hkssjdsbs}}</span></p>
          <p class="flex_item">领取退休金银行名称：<span>{{data.lqtxjyhmc}}</span></p>
          <p class="flex_item">银行账号：<span>{{data.yhzh}}</span></p>
          <p class="flex_item" v-if="data.qtsm">附加说明：<span>{{data.qtsm}}</span></p>
          <div style="margin-top:10px;">
            申请资料：
            <div>
              <div class="img_wrap">
                <img :src="data.sfzzmz_id" alt=""  class="upload_img">
                <p class="cx_file">身份证正面</p>
              </div>
              <div class="img_wrap">
                <img :src="data.sfzfmz_id" alt=""  class="upload_img">
                <p class="cx_file">身份证反面</p>
              </div>
              <div class="img_wrap" v-if="data.hkbsy_id">
                <img :src="data.hkbsy_id" alt=""  class="upload_img">
                <p class="cx_file">户口本首页</p>
              </div>
              <div class="img_wrap" v-if="data.hkbbgy_id">
                <img :src="data.hkbbgy_id" alt=""  class="upload_img">
                <p class="cx_file">户口本变更页</p>
              </div>
              <div class="img_wrap" v-if="data.hkbbry_id">
                <img :src="data.hkbbry_id" alt=""  class="upload_img">
                <p class="cx_file">户口本本人页</p>
              </div>
              <div class="img_wrap" v-if="data.hkbbrbgy_id">
                <img :src="data.hkbbrbgy_id" alt=""  class="upload_img">
                <p class="cx_file">户口本本人变更页</p>
              </div>
              <div class="img_wrap" v-if="data.yhk_id">
                <img :src="data.yhk_id" alt=""  class="upload_img">
                <p class="cx_file">领取退休金银行卡正面图片</p>
              </div>
              <div class="img_wrap" v-if="data.mgz_id">
                <img :src="data.mgz_id" alt=""  class="upload_img">
                <p class="cx_file">2寸近期免冠照片</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="no-text" v-show="!dataflag">暂无数据</div>
    </div>
  </div>
</template>
<script>
import Mheader from "@/ldry/group/mheader/mheader";
import $ from "@/common/js/axios";

export default {
  components: { Mheader },
  name: "txyyinfo",
  data() {
    return {
      dataflag: false,
      data: {}
    };
  },
  methods: {
    // 获取申请列表
    GET_reverseList() {
      this.$loading = true;
      $.post("/dafwgl/txsq/sqXx",{yyid: this.$route.query.yyid})
        .then(res => {
          const data = res.returnData;
          this.$loading = false;
          if (parseInt(data.executeResult, 10) === 1) {
            this.dataflag = true;
            this.data = data.txxx;
            this.data.sfzfmz_id = conf.urlPrefix + '/dafwgl/wjscxz/tpxs?tpid=' + this.data.sfzfmz_id;
            this.data.sfzzmz_id = conf.urlPrefix + '/dafwgl/wjscxz/tpxs?tpid=' + this.data.sfzzmz_id;
            this.data.hkbsy_id = conf.urlPrefix + '/dafwgl/wjscxz/tpxs?tpid=' + this.data.hkbsy_id;
            this.data.hkbbgy_id = conf.urlPrefix + '/dafwgl/wjscxz/tpxs?tpid=' + this.data.hkbbgy_id;
            this.data.hkbbry_id = conf.urlPrefix + '/dafwgl/wjscxz/tpxs?tpid=' + this.data.hkbbry_id;
            this.data.hkbbrbgy_id = conf.urlPrefix + '/dafwgl/wjscxz/tpxs?tpid=' + this.data.hkbbrbgy_id;
            this.data.yhk_id = conf.urlPrefix + '/dafwgl/wjscxz/tpxs?tpid=' + this.data.yhk_id;
            this.data.mgz_id = conf.urlPrefix + '/dafwgl/wjscxz/tpxs?tpid=' + this.data.mgz_id;
          }else{
            this.$alert({
              type: 'warning',
              message: data.message
            },_=>{
              this.$router.push({name:'txyytxyy'})
            });
          }
        })
        .catch(() => {});
    },
    goBack() {
      this.$router.go(-1);
    }
  },
  created() {
    this.GET_reverseList();
  }
};
</script>
<style lang="scss" scoped>
@import "~common/scss/variable.scss";
.img_wrap{
  float: left;
  width: 50%;
  height: 400px;
  padding: 20px 0;
  text-align: center;
  position: relative;
  .upload_img{
    max-width: 500px;
    max-height: 300px;
  }
  .cx_file{
    line-height: 1.2;
    text-align: center;
    padding: 20px 40px;
    color: $color-base;
  }
}
.infor {
  font-size:$font-size-base;
  .no-text {
    width: 984px;
    height: 300px;
    margin: 84px auto 0;
    border: $border;
    background: #fff;
    text-align: center;
    line-height: 300px;
  }
  .infor-wrap {
    width: 100%;
    font-size: $font-size-base;
    .flex{
      display: flex;
      flex-direction: column;
      .flex_item{
        padding: 10px 0;
      }
    }
    .infor-text-wrap {
      padding: $padding-base;
      box-sizing: border-box;
      border: $border;
      background: #fff;
      overflow: hidden;

      ._left,.cause {
        float: left;
        padding: 10px 0;
        box-sizing: border-box;
        width: 50%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .cause{
        width: 100%;
      }
    }
  }
}
</style>
